<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <!-- <link rel="stylesheet" href="css/swiper.min.css"> -->
    <link rel="stylesheet" href="css/main.css">
</head>

<body class="index-body">
    <div class="loading" style="">
        <div class="bar">
          <div class="bar-icon">
            <img src="images/loading_icon.png" class="img-bg" alt="">
          </div>
          <div class="bar-progress">
            <span class="line"></span>
            <div class="bar-words">Loading...</div>
          </div>
            <div class="bar-img">
              <img src="images/loading_1.png" class="img-bg" alt="">
              <img src="images/loading_2.png" class="img-bg" alt="">
              <img src="images/loading_3.png" class="img-bg" alt="">
            </div>
        </div>
    </div>
    <div class="wrap" style="display: block;">
        <div class="music on" id="music" style="top:1.8rem;z-index: 9;">
            <img src="images/play.png" alt="" class="play">
            <img src="images/pause.png" alt="" class="pause">
        </div>
        <div class="logo-wrap" style="z-index: 2;">
            <img src="images/logo1.png" class="fl logo1" alt="">
            <img src="images/logo2.png" class="fr logo2" alt="">
        </div>
        <div class="index i-wrap" style="z-index: 2;">
            <div class="light">
                <img src="images/i_bg.png" class="img-bg" alt="">
            </div>
            <div class="photo-box preserve-3d">
                <div class="photo-inner preserve-3d">
                    <div class="page page6 preserve-3d">
                        <img src="images/p_6.jpg" alt="">
                    </div>
                    <div class="page page5 preserve-3d">
                        <img src="images/p_5.jpg" alt="">
                    </div>
                    <div class="page page4 preserve-3d">
                        <img src="images/p_4.jpg" alt="">
                    </div>
                    <div class="page page3 preserve-3d">
                        <img src="images/p_3.jpg" alt="">
                    </div>
                    <div class="page page2 preserve-3d">
                        <img src="images/p_2.jpg" alt="">
                    </div>
                    <div class="page page1 preserve-3d">
                        <img src="images/p_1.jpg" alt="">
                    </div>
                </div>
                <div class="arr-next">
                  <img src="images/p_next.png" class="img-bg" alt="">
                </div>
                <div class="photo-hand">
                  <img src="images/hand_arr.png" class="img-bg fl animated fadeIn infinite" alt="" style="width: 1.64rem;">
                  <img src="images/hand.png" style="width: 2.1067rem;" class="img-bg fr animated fadeInRight infinite" alt="">
                </div>
            </div>
        </div>
        <div class="i-sub" style="display: none;">
            <img src="images/bg2.jpg" class="bg-img" alt="">
            <div class="i-inner">
                <img src="images/i_inner_bg.jpg" class="bg-img" alt="">
                <div class="link animated bounceInRight">
                    <a href="roll.html" class="m20">
                        <img src="images/go_roll.png" class="img-bg" alt="">
                    </a>
                    <a href="rule.html ">
                        <img src="images/go_rule.png" class="img-bg" alt="">
                    </a>
                </div>
                <div class="clothes">
                  <img src="images/clo_1.png" class="img-bg" alt="">
                </div>
                <div class="i-main">
                  <div class="i-tit animated bounceInDown">
                   <!--  <img src="images/i_tit_front.png" class="img-bg i-front  shake infinite" alt="" >
                    <img src="images/i_tit_back.png" class="img-bg i-back  shake infinite" alt=""> -->
                    <img src="images/i_tit.png" class="img-bg" alt="">
                  </div>
                  <div class="i-sub-tit  animated bounceInDown">
                    <img src="images/i_sub_tit2.png" class="img-bg" alt="">
                  </div>
                  <div class="i-book  animated fadeIn">
                    <img src="images/i_book2.png" class="img-bg" alt="">
                  </div>
                  <div class="start-btn animated tada infinite replace-href" data-href='./upload.html'>
                      <img src="images/btn_start.png" class="img-bg" alt="">
                  </div>
                </div>
            </div>
        </div>
    </div>


<!-- 中奖弹窗 -->
  <div class="mask m-prize" >
        <div class="m-box">
            <span class="close"><img src="images/close.png" class="img-bg" alt=""></span>
            <div class="m-inner">
              <div class="m-tit">
                恭喜您获得
              </div>
              <div class="m-sub-tit">
                体彩&独立设计师 定制潮公益限量T恤
              </div>
              <div class="m-input">
                <input type="text" id="name" placeholder="请输入收货人名称">
                <input type="text" id="tel" placeholder="请输入手机号">
                <input type="text" id="address" placeholder="请输入邮寄地址">
              </div>
            </div>
            <div class="m-close btn-tp btn-prize">
                确定
            </div>
        </div>
  </div>

<!-- 已结束弹窗 -->
  <div class="mask m-end" >
        <div class="m-box">
            <span class="close"><img src="images/close.png" class="img-bg" alt=""></span>
            <div class="m-inner">
              <div class="m-tit">
                活动已结束
              </div>
              <div class="m-sub-tit">
                
              请关注“公益体彩”，获取更多活动资讯
            
              </div>
              <div style="width: 3.6133rem;margin:0.2667rem auto;">
              <img src="images/qr.png" class="img-bg" alt="">
            </div>
            </div>
            <div class="m-close btn-tp ">
                确定
            </div>
        </div>
  </div>

  <!-- 引导关注弹窗 -->
  <div class="mask m-yd" >
        <div class="m-box">
            <span class="close"><img src="images/close.png" class="img-bg" alt=""></span>
            <div class="m-inner">
              <div class="m-tit" style="font-size: 0.6667rem;">
              请关注“公益体彩”<br>获取更多活动资讯
              </div>
              <div class="m-sub-tit">
                
            
              </div>
              <div style="width: 3.6133rem;margin:0.2667rem auto;">
              <img src="images/qr.png" class="img-bg" alt="">
            </div>
            </div>
            <div class="m-close btn-tp ">
                确定
            </div>
        </div>
  </div>


  <!-- 未开始弹窗 -->
  <div class="mask m-no-start" >
        <div class="m-box">
            <span class="close"><img src="images/close.png" class="img-bg" alt=""></span>
            <div class="m-inner">
              <div class="m-tit" style="font-size: 0.6667rem;">
              活动尚未开始
              </div>
              <div class="m-sub-tit">
                
              活动进行时间为 8:00-22:00
            
              </div>
            </div>
            <div class="m-close btn-tp ">
                确定
            </div>
        </div>
  </div>

  <!-- 用户验证弹窗 -->
  <div class="mask m-verify" >
        <div class="m-box">
            <span class="close"><img src="images/close.png" class="img-bg" alt=""></span>
            <div class="m-inner">
              <div class="m-tit" style="font-size: 0.6667rem;">
                用户验证
              </div>
              <div class="m-sub-tit">
                
            
              </div>
              <div class="m-input">
                <input type="text" id="tel-verify" placeholder="请输入手机号">
              </div>
            </div>
            <div class="m-close btn-tp btn-verify">
                确定
            </div>
        </div>
  </div>




    <audio src="js/game.mp3" id="game-music"></audio>
    <script src="js/touch.min.js"></script>
    <script src="js/jQuery.min.js"></script>
    <!-- <script src="js/swiper.min.js"></script> -->
    <script>
    $(function() {
        var $img = $('img');
         var length =$img.length;
         var oneWidth = 100 / length;
         var flag = 0;
         var is_load=false;
         var load_index=0;
        $('img').each(function(){
          var img = new Image();
          img.src = $(this).attr('src');
          img.onload = function(){
            flag++;
            $('.line').width(oneWidth * flag + '%');
            if(oneWidth * flag >= 90){
              is_load=true;
             $('.loading').hide();
             $('.wrap').show();
            }
          }
        }); 

        function change_img(){
          if(!is_load){
            setTimeout(change_img,500)
          }
          $('.bar-img img').eq(load_index).show().siblings().hide();
          load_index++
          if(load_index>2){
            load_index=0;
          }
        }
        change_img();

        var r_deg = 0;

        $('.arr-next').on('click',function(){
          set_page();
        });

        $('.photo-inner .page').on('click', function() {
          set_page();
        });
        $('.photo-box').on('swipeleft',function(){
          set_page();
        });

        var page_flag =true;
        function set_page(){
          if(!page_flag){return};
          page_flag=false;
            var index= Math.abs(r_deg-5);
            console.log(r_deg);
            if(r_deg ==5){
              setTimeout(function(){
                $('.i-wrap').hide();
                $('.i-sub').show();
              },800)
            }else if(r_deg ==0){
              $('.photo-hand').hide();
              setTimeout(function(){
                $('.arr-next').show();
              },500);
            }else if(r_deg ==4){
                // $('.arr-next').hide();
            }
            $('.photo-inner .page').eq(index).css({
                '-webkit-transform': 'rotateY(-' + (179 - r_deg) + 'deg)',
                transform: 'rotateY(-' + (179 - r_deg) + 'deg)',
                opacity:r_deg==5?0:1
            });
            r_deg++;
            setTimeout(function(){
              page_flag=true;
            },1500);
          
        }

        // 未开始弹窗
        // $('.m-no-start').show();
        // 
        // 
        // 引导关注弹窗 未加
        // $('.m-yd').show();
        // 
        // 中奖未填写手机号
        // $('.m-prize').show();
        // 
        // 
        // 防刷弹窗
        // $('.m-verify').show();
        // 

        //已结束弹窗 
        // $('.m-end').show();   
        // 
        // 
        // 
        // 
        // 



        // 用户验证确定按钮
        $('.btn-verify').off('click').on('click',function(){
          var tel = $('#tel-verify').val();
          if(tel==''){
            alert('手机号不能为空哦~');
            return;
          }
          // $.ajax({

          // })
        })





        $('.m-close,.close').on('click',function(){
          $(this).parents('.mask').hide();
        })

        //中奖确定按钮
        $('.btn-prize').off('click').on('click',function(){
          var nickname = $('#name').val();
          var tel = $('#tel').val();
          var address = $('#address').val();
          if(nickname ==''){
            alert('收货人名称不能为空哦~');
            return;
          }
          if(tel ==''){
            alert('手机号不能为空哦~');
            return;
          }
          if(address ==''){
            alert('邮寄地址不能为空哦~');
            return;
          };
          // $.ajax({
          //   url:'',
          //   type:'post',
          //   data:{
          //     tel:tel,
          //     nickname:nickname,
          //     address:address
          //   },
          //   success:function(data){
              
          //   }
          // })
        });

         $('.replace-href').on('click',function(){
           var link = $(this).attr('data-href');
            window.location.replace(link);
         }) ;

        $('.music').on("click", function() {
            console.log(111);
            var audio = $('#game-music')[0];
            $(this).toggleClass('on');
            if ($(this).hasClass('on')) {
                // 暂停中
                audio.play();
            } else {
                // 播放中
                audio.pause();
            }
        });

        //ios 音乐自动播放
        function audioAutoPlay(id) {
            var audio = document.getElementById(id);
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function() {
                audio.play();
            }, false);
            document.addEventListener('YixinJSBridgeReady', function() {
                audio.play();
            }, false);
        }
        audioAutoPlay('game-music');
    });
    </script>
</body>

</html>